<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="../css/element-plus.css">
    <style>
        .flex-grow {
            flex-grow: 1;
        }

        /*.el-header .el-menu {*/
        /*    background-color: #555c63;*/
        /*    color: white;*/
        /*}*/

        /*.el-header .el-menu-item, .el-header .el-sub-menu__title {*/
        /*    color: white !important;*/
        /*}*/

        .el-aside {
            width: 15%;
        }
        .el-main {
            width: 80%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <!--顶部菜单栏-->
        <el-header>
            <el-menu class="el-menu-demo" default-active="3"  mode="horizontal" :ellipsis="false" background-color="#545c64"
                     text-color="#fff"
                     active-text-color="#ffd04b">
                <el-menu-item index="0">
                    <img style="width: 100px" src="../images/logo.png" alt="Element logo"/>
                </el-menu-item>
                <div class="flex-grow"></div>
                <el-menu-item index="1">处理中心</el-menu-item>
                <el-sub-menu index="2">
                    <template #title>我的工作台</template>
                    <el-menu-item index="2-1">item one</el-menu-item>
                    <el-menu-item index="2-2">item two</el-menu-item>
                    <el-menu-item index="2-3">item three</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="3">首页</el-menu-item>
            </el-menu>
        </el-header>
        <el-container>
            <!--侧边栏-->
            <el-aside>
                <!--default-active 默认打开的是哪个菜单栏 找到的是el-sub-menu/ el-menu-item 的index属性-->
                <el-menu default-active="1-1" class="el-menu-vertical-demo">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <location/>
                            </el-icon>
                            <span>学工部</span>
                        </template>
                        <el-menu-item index="1-1">
                            <el-icon>
                                <Food/>
                            </el-icon>
                            在校学生管理
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <el-icon>
                                <Cold-drink/>
                            </el-icon>
                            学生升级/留级
                        </el-menu-item>
                        <el-menu-item index="1-3">
                            <el-icon>
                                <Sugar/>
                            </el-icon>
                            学生就业情况
                        </el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="2" v-for=" menu in menus">
                        <el-icon>
                            <Dish/>
                        </el-icon>
                        <span>{{menu.name}}</span>
                    </el-menu-item>

                </el-menu>
            </el-aside>
            <el-main>
                <!--管理菜单栏-->
                <el-row>
                    <el-col :span="4" style="font-size: 20px;color: red;">学生列表</el-col>
                    <el-col :span="4" :offset="16" style="text-align: right">
                        <el-button @click="add" type="primary">添加学生</el-button>
                    </el-col>
                </el-row>
                <!--  列表信息  -->
                <el-table :data="students" style="width: 100%">
                    <!--formatter 绑定要如何格式化显示数据 formatterBirth 方法名 在方法中可以直接获取 row, column, cellValue, index-->
                    <el-table-column label="姓名" prop="name" width="80"></el-table-column>
                    <el-table-column label="生日" prop="birth" width="180"
                                     :formatter="formatterBirth"></el-table-column>
                    <el-table-column label="性别" prop="gender" width="80"></el-table-column>
                    <el-table-column align="right" label="操作">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改
                            </el-button>
                            <el-popconfirm
                                    confirm-button-text="确定"
                                    cancel-button-text="取消"
                                    icon-color="#626AEF"
                                    title="确定要删除吗？"
                                    @confirm="handleDelete(scope.$index, scope.row)"
                                    @cancel="cancelEvent">
                                <template #reference>
                                    <el-button size="small" type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>

    <!--修改信息-->
    <el-dialog v-model="editVisible" title="修改信息">
        <el-form :model="student">
            <el-form-item label="姓名" label-width="80">
                <el-input v-model="student.name" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="性别" :label-width="80">
                <el-radio-group v-model="student.gender" class="ml-4">
                    <el-radio label="男" size="large">男</el-radio>
                    <el-radio label="女" size="large">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" label-width="80">
                <el-date-picker
                        v-model="student.birth"
                        type="date"
                        placeholder="请选择"
                        size="default"
                ></el-date-picker>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">提交</el-button>
      </span>
        </template>
    </el-dialog>

    <!--添加学生-->
    <el-dialog v-model="addVisible" title="添加学生">
        <el-form :model="student">
            <el-form-item label="姓名" label-width="80">
                <el-input v-model="student.name" autocomplete="off" type="text"/>
            </el-form-item>
            <el-form-item label="性别" :label-width="80">
                <el-radio-group v-model="student.gender" class="ml-4">
                    <el-radio label="男" size="large">男</el-radio>
                    <el-radio label="女" size="large">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="出生日期" label-width="80">
                <el-date-picker
                        v-model="student.birth"
                        type="date"
                        placeholder="请选择"
                        size="default"
                ></el-date-picker>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="addVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAdd">提交</el-button>
      </span>
        </template>
    </el-dialog>
</div>
<script src="../js/vue.js"></script>
<script src="../js/element-plus.js"></script>
<script src="../js/icons-vue.js"></script>
<script src="../js/axios.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                students: [],
                editVisible: false,
                student: {
                    id: undefined,
                    name: '',
                    birth: '',
                    gender: ''
                },
                addVisible: false,
                menus: [
                    {name : '用户管理'},
                    {name : '添加用户'},
                    {name : '查看日志'},
                ]
            }
        },
        methods: {
            handleEdit(index, row) {
                this.editVisible = true
                this.student = row
            },
            handleDelete(index, row) {
                axios.get("http://localhost:8080/student/delete?id=" + row.id).then(res => {
                    if (res.data.code === 1) {
                        this.$message.success(res.data.msg)
                        this.getStudents()
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            },
            getStudents() {
                axios.get('http://localhost:8080/student/list').then(res => {
                    if (res.data.code === 1) {
                        this.students = res.data.data
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            },
            formatterBirth(row, column, cellValue, index) {
                if (cellValue) {
                    let d = new Date(cellValue)
                    let month = d.getMonth() + 1
                    let day = d.getDate()
                    return d.getFullYear() + "-" + (month >= 10 ? month : "0" + month) + "-" + (day >= 10 ? day : "0" + day)
                }
                return "暂无数据"

            },
            cancelEvent() {
                this.$message.info("取消操作")
            },
            submitEdit() {
                axios.post("http://localhost:8080/student/edit", this.student).then(res => {
                    if (res.data.code === 1) {
                        this.$message.success(res.data.msg)
                        this.editVisible = false
                        this.getStudents()
                    } else {
                        this.$message.error(res.data.msg)
                        this.editVisible = false
                    }
                })
            },
            add() {
                this.addVisible = true
                this.student = {}
            },
            submitAdd() {
                axios.post("http://localhost:8080/student/add", this.student).then(res => {
                    if (res.data.code === 1) {
                        this.$message.success(res.data.msg)
                        this.getStudents()
                    } else {
                        this.$message.error(res.data.msg)
                    }
                    this.addVisible = false
                })
            }
        },
        created() {
            this.getStudents()
        }
    })
    app.use(ElementPlus)
    // 注册所有图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
    }
    app.mount("#app")
</script>
</body>
</html>